"use client";

import { useState } from "react";
import { useAuthStore } from "@/lib/authStore";
import { ProtectedRoute } from "@/components/auth/ProtectedRoute";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { PenTool, Plus, Edit, Trash2 } from "lucide-react";

export default function AuthorPage() {
  const user = useAuthStore((state) => state.user);
  const [posts, setPosts] = useState([
    { id: 1, title: "我的第一篇博客", status: "draft", createdAt: "2024-01-01" },
    { id: 2, title: "技术分享：React 最佳实践", status: "published", createdAt: "2024-01-01" },
    { id: 3, title: "生活感悟：编程与人生", status: "draft", createdAt: "2024-01-01" },
  ]);

  const getStatusColor = (status: string) => {
    switch (status) {
      case "published":
        return "bg-green-100 text-green-800";
      case "draft":
        return "bg-yellow-100 text-yellow-800";
      default:
        return "bg-gray-100 text-gray-800";
    }
  };

  return (
    <ProtectedRoute requiredRoles={["AUTHOR", "ADMIN"]}>
      <div className="min-h-screen bg-gray-50y-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              作者控制台
            </h1>
            <p className="text-gray-600">
              欢迎回来，{user?.name}！您可以在这里管理您的文章。
            </p>
          </div>

          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-semibold">我的文章</h2>
            <Button>
              <Plus className="h-4 w-4 mr-2" />
              新建文章
            </Button>
          </div>

          <div className="grid gap-6">
            {posts.map((post) => (
              <Card key={post.id}>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div>
                      <CardTitle className="text-lg">{post.title}</CardTitle>
                      <p className="text-sm text-gray-500 mt-1">
                        创建于 {post.createdAt}
                      </p>
                    </div>
                    <Badge className={getStatusColor(post.status)}>
                      {post.status === "published" ? "已发布" : "草稿"}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="flex space-x-2">
                    <Button size="sm" variant="outline">
                      <Edit className="h-4 w-4 mr-1" />
                      编辑
                    </Button>
                    <Button size="sm" variant="outline">
                      <PenTool className="h-4 w-4 mr-1" />
                      {post.status === "published" ? "取消发布" : "发布"}
                    </Button>
                    <Button size="sm" variant="destructive">
                      <Trash2 className="h-4 w-4 mr-1" />
                      删除
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </ProtectedRoute>
  );
} 